<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../iconfont/iconfont.css">
		<style type="text/css">
			body{
				background-color:#000000;
			}
			#curs,html,#realView{height: 100%;width: 100%;overflow: hidden;}
			#curs .mui-content{
				height:calc(100% - 44px);
				width: calc(100%);
				padding: 0px;
				margin-top:44px;
			}
			.iconfont {
			  font-family: "iconfont" !important;
			  font-size: 30px;
			  font-style: normal;
			  -webkit-font-smoothing: antialiased;
			  -moz-osx-font-smoothing: grayscale;
			  color:dodgerblue;
			}
			
			#left {
				position: absolute;
                bottom: 20px;
			    z-index: 4;
			    left: 20px;
			}
			#right {
				position: absolute;
                bottom: 20px;
			    z-index: 4;
			    right: 20px;
			}			    
			.mui-icon-back:before, .mui-icon-left-nav:before{
				color:black;
			}
			.mui-pull-right{
				margin-top:10px;
			}
			.iconfont{
				color:#F0AD4E;
			}
		</style>
	</head>
	<body id="curs">
		<div class="mui-content">
		   <header class="mui-bar mui-bar-nav">
		       <a id="onBack" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		       <a class="iconfont mui-icon-right-nav mui-pull-right " id="btn">&#xe620;</a>
		       <h1 class="mui-title">一次图</h1>
		   </header>
		    <iframe class="mui-row" content="charset=utf-8" allowFullScreen='ture' id="realView" alt="一次图" src="" style="border-width:0px;"></iframe>
		</div>
		<div id="operate" calss="mui-hidden"> 
			<div id="left">
				<span class="iconfont" style="">&#xe62c;</span>
			</div>
			<div id="right">
				<span class="iconfont" style="">&#xe7c2;</span>
			</div>
		</div>
	</body>
	<script src="../js/mui.min.js"></script>
	<script src="../js/jquery-3.2.1.min.js"></script>
	<script src="../js/mqttws31.min.js"></script>
	<script src="../js/mqttgetdata.js"></script>
	<script src="../js/common.js"></script>
	<script src="../js/ZNative.js"></script>
	<script type="text/javascript">
		//mui("#realView")[0].src = "./draw1.svg";
		
		WebOS.OnReadly(function(args){
			
			var json = JSON.parse(args);
			
			var mqttName ;
			var mqttPassword ;
			var ip;
			var picUrl = [];
			var reportUrl;
			var dcsId = WebOS.getItem("dcsId");//获取站点id
			var token = WebOS.getItem('token');
			var picUrls=WebOS.getItem("fileUrl");
			

			if(picUrls != null) {
					picUrl = picUrls.split(",");
					totalpage=picUrl.length;
					if(totalpage>1){
						mui("#operate")[0].classList.remove('mui-hidden');
					}else{
						mui("#operate")[0].classList.add('mui-hidden');
					}
					reportUrl =svgHttp+dcsId + "/" + picUrl[0];
					
					//console.log(reportUrl);
					
					mui.ajax(reportUrl,{
						type: 'get', //HTTP请求类型
						headers: {
							'Content-Type': 'application/x-www-form-urlencoded'
						},
						success: function(msg){
					   		
						 	mui("#realView")[0].src = reportUrl; //加载SVG document文档
						   //document.getElementById('realView').contentWindow.onload = initSVG();
						    getMqttIp(); //给svg刷数据（ip、mqttName、）
					   	},
					     error : function(err){
						   mui.alert("此站无页面");
						   //$("#realView").attr('src',"404_SVG.html");
					   	}
					})
			}else{
				alert("此站无页面");
			}	
			//请求svg数据
			function getMqttIp(){
				mui.ajax(getUrl + "systemInfo/company",{//一次图mqtt订阅数据IP等
				data: {
					sysId:sysId,
					dcsId:dcsId,
					token:token,
				},
				dataType: 'json', //服务器返回json格式数据
				type: 'post', //HTTP请求类型
				headers: {
					'Content-Type': 'application/x-www-form-urlencoded'
				},
				success: function(json){
					//判断token
					if(json.tokenFlag == false) {
						mui.alert(json.msg);
						//		记得每个页面都要有这个判断						
					} else {
						if(json != null){
						mqttName = json.mqttName;//名称
						mqttPassword = json.mqttPassword;//密码
						ip = json.ip;//ip
               			}
						getMqtts(dcsId, ip, mqttName, mqttPassword);
					}
					
				},
				error: function(e) {
					//异常处理；
				}
			});
			}

            //svg切换
			var totalpage;
			var currentpage = 1; //当前页数
			mui("#left")[0].addEventListener("tap",function() { 
			   if(currentpage == 1){ 
				   mui.alert('已经是第一页了！'); 
				   return; 
			   }else if(currentpage > 1){
				   	currentpage -= 1; 
				   	mui("#realView")[0].src = svgHttp+dcsId + "/" + picUrl[currentpage-1]; //加载SVG document文档
					getMqtts(dcsId, ip, mqttName, mqttPassword);
					return; 
			   }else{//等于0时
				   mui.alert('暂无一次图分页！');
			   }
			});
			mui("#right")[0].addEventListener("tap",function() { 
				   if(currentpage == totalpage){ 
					   mui.alert('已经是最后一页了！'); 
					   return;
				   }else if(currentpage == (totalpage-1)){ 
					    currentpage += 1; 
					    mui("#realView")[0].src = svgHttp+dcsId + "/" + picUrl[currentpage-1]; //加载SVG document文档
						getMqtts(dcsId, ip, mqttName, mqttPassword);
					    return;
				   }else if(currentpage > 0){
					    currentpage += 1; 
					    mui("#realView")[0].src = svgHttp+dcsId + "/" + picUrl[currentpage-1]; //加载SVG document文档
						getMqtts(dcsId, ip, mqttName, mqttPassword);
					    return;
				   }
			});
			
					
			mui("#btn")[0].addEventListener("tap",function () {

				if(window.orientation == 0){	//竖屏时,横屏
					console.log((mui("#btn")[0]));
					mui("#btn")[0].innerHTML = "&#xe620;";
					WebOS.setOrientation("SCREEN_ORIENTATION_LANDSCAPE");
					// 横屏查看
					// 或者使用把屏幕改变成横屏方向

				}else{
					mui("#btn")[0].innerHTML = "&#xe620;";
					// 取消旋转屏幕
					// 或者使用把屏幕改变成竖屏正方向
					//WebOS.toast("SCREEN_ORIENTATION_PORTRAIT");
					WebOS.setOrientation("SCREEN_ORIENTATION_PORTRAIT");
				}
			});


			mui("#onBack")[0].addEventListener("tap",function() { 
				WebOS.onBack();
			});
			
			
		
		
		})
		

	</script>
</html>